<template>
  <view class="mangerLogin">
    <view class="header">
      <view class="header_box">管理人员登录</view>
    </view>
    <view class="main">
      <div class="main_box">
        <view class="loginBox">
          <uni-easyinput
            prefixIcon="person"
            v-model="form.username"
            placeholder="请输入用户名"
            :disabled="loading"
          ></uni-easyinput>
        </view>
        <view class="loginBox">
          <uni-easyinput
            prefixIcon="locked"
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
            :disabled="loading"
          ></uni-easyinput>
        </view>
      </div>
      <view class="loginButton">
        <button :loading="loading" @click="login" type="warn" class="but-login">
          登录
        </button>
      </view>
      <view class="tips">
        <view class="box">
          <div style="margin-left: 20rpx">
            <checkbox value="cb" :checked="access" @click="handleAccess" />
            勾选用户协议和隐私政策
          </div>
          <div style="margin-right: 10rpx" @click="toUserLogin">用户登录</div>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      access: false,
      loading: false,
    };
  },
  methods: {
    handleAccess() {
      this.access = !this.access;
    },
    toUserLogin() {
      uni.reLaunch({
        url: "/pages/login/index",
      });
    },
    login() {
      if (!this.access) {
        uni.showToast({
          title: "请查看协议和隐私政策并勾选",
          icon: "none",
        });
        return;
      }
      if (this.form.username == "" || this.form.username.length == 0) {
        uni.showToast({
          title: "请输入用户名",
          icon: "none",
        });
        return;
      }
      if (this.form.password == "" || this.form.password.length == 0) {
        uni.showToast({
          title: "请输入密码",
          icon: "none",
        });
        return;
      }
      this.goTologin();
    },
    async goTologin() {
      try {
        this.loading = true;
        const data = { ...this.form };
        const result = await this.$request.request({
          url: this.$api.login,
          method: "GET",
          isToast: true,
          data,
        });
        this.loading = false;
      } catch (error) {
        console.log(error.message);
        this.loading = false;
        uni.showToast({
          title: error,
          duration: 850,
          icon: "error",
        });
      }
    },
  },
  onload() {},
};
</script>

<style lang="less">
.mangerLogin {
  width: 100%;
  height: 100vh;
  background-color: #fff;

  .uni-easyinput {
    border-radius: 15px;
  }

  .header {
    width: 100%;
    height: 280upx;
    display: flex;
    align-items: center;
    background: #f8f8f8;

    .header_box {
      width: 100%;
      height: 200upx;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      color: black;
      font-size: 35rpx;
      font-weight: 700;
    }
  }

  .tips {
    width: 100%;
    margin: 30rpx 0;
    font-size: 24rpx;
    font-weight: 400;
    display: flex;
    justify-content: center;

    .box {
      width: 90%;
      display: flex;
      justify-content: space-between;
    }
  }

  .main {
    width: 100%;
    transform: translateY(-30upx);
    flex: 1;
    background-color: #fdfdfd;
    border-radius: 25px 25px 0 0;
    box-shadow: 0px -5px 3px -3px #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .loginButton {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 10px;

      .but-login {
        height: 84upx;
        color: #fff;
        background-color: #007aff;
        border-radius: 10px;
        width: 90%;
      }
    }

    &_box {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      padding-top: 20px;
      width: 100%;

      .loginBox {
        margin-bottom: 20px;
        width: 90%;
        border-radius: 15px;
      }
    }
  }
}
</style>
